import AutoChart from '@/components/Echarts/AutoChart';
import { medicneCategory } from '@/services/api';
// @ts-ignore
import { BorderBox4 } from '@jiaminghi/data-view-react';
import React, { useEffect } from 'react';
import { useImmer } from 'use-immer';
import '../../Home.less';

const ColumnCharts: React.FC = () => {
  const [options, setOptions] = useImmer({
    tooltip: {
      trigger: 'item',
    },
    legend: {
      show: false,
      top: 'center',
      right: '3%',
      orient: 'vertical', // 导航 是垂直排列  还是水平默认水平('horizontal')
      itemGap: 25, // 导航每个之间的间距
      textStyle: {
        color: '#fff',
      },
      itemWidth: 8,
      itemHeight: 8,
    },
    series: [
      {
        name: '城市',
        type: 'pie',
        radius: ['50%', '68%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderWidth: 5,
          borderColor: 'rgba(0,0,0,0.1)',
          color: function (params: any) {
            // 根据参数返回不同的颜色
            switch (params.dataIndex) {
              case 0:
                return '#7aabf5';
              case 1:
                return '#396993';
              case 2:
                return '#c1fafd';
              case 3:
                return '#94d8db';
              case 4:
                return '#5a9597';
              default:
                return '#fff';
            }
          },
        },
        label: {
          show: true,
        },
        Emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: true,
        },
        data: [],
        // right: 65,
      },
    ],
  });

  useEffect(() => {
    medicneCategory().then((res) => {
      setOptions((draft) => {
        draft.series[0].data = res.data.map((i: API.ChartsData) => {
          Number(i.value);
          return i;
        });
      });
    });
  }, []);

  return (
    <div className="chart_box">
      <BorderBox4 color={['#396993', '#396993']}>
        <div className="chart_title">中药类型统计</div>
        <div className="chart_chart padding-5">
          <AutoChart option={options as any}></AutoChart>
        </div>
      </BorderBox4>
    </div>
  );
};
export default ColumnCharts;
